<template>
  <div>
    <t-card class="list-card-container">
      <!-- 操作按钮 -->
      <t-row justify="space-between">
        <div class="left-operation-container">
          <t-button
            variant="base"
            theme="default"
            @click="handleSearch"
          >
            搜索
          </t-button>
        </div>
      </t-row>
      <!-- 列表 -->
      <div class="table-container">
        <el-table
          :data="data"
          style="width: 100%"
          :height="tableHeight"
        >
          <el-table-column
            v-for="(item, index) in columns"
            :prop="item.colKey"
            :label="item.title"
          >
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :hide-on-single-page="pagination.total <= 0"
          :current-page="pagination.defaultCurrent"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.defaultPageSize"
          layout="total,->, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </t-card>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { SearchIcon } from "tdesign-icons-vue";
import Trend from "@/components/mainEntrance/trend/index.vue";
import { prefix } from "@/config/global";
import { getUserList, queryList, queryId, saveOrUpdate, deleteFun } from "@/api/exampleApi/api.js";
import { CONTRACT_STATUS, CONTRACT_STATUS_OPTIONS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES } from "@/constants";
import dayjs from "dayjs";

export default Vue.extend({
  name: "UserList",
  components: {
    SearchIcon,
    Trend,
  },
  filters: {
    filterStatus(key) {
      let value = "";
      switch (key) {
        case 0:
          value = "正常";
          break;
        case 1:
          value = "暂停";
          break;
        default:
          break;
      }
      key = value;
      return key;
    }
  },
  data() {
    const INITIAL_DATA = {
      projectId: "",
      projectName: "",
      projectContacts: "",
      phone: "",
      createBy: "",
      createTime: dayjs().format("YYYY-MM-DD hh:mm:ss"),
      updateBy: "",
      updateTime: dayjs().add(7, 'days').format("YYYY-MM-DD hh:mm:ss"),
      remark: "",
      projectStatus: "",
      department: "",
      priority: "",
      deleted: 0,
      amount: 0
    };
    return {
      thCss: "custom-th-class",
      tableHeight: window.innerHeight - 180,
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      dataLoading: false,
      data: [],
      selectedRowKeys: [],
      value: "first",

      formData: { ...INITIAL_DATA },
      columns: [
        // {
        //   colKey: "projectId",
        //   type: "multiple",
        //   width: 100,
        //   fixed: "left",
        //   className: ({ row }) => {
        //     return 'cell-css';
        //   },
        // },
        {
          title: "用户类型",
          align: "left",
          width: 200,
          ellipsis: true,
          colKey: "userType",
        },
        {
          title: "用户名",
          width: 200,
          ellipsis: true,
          colKey: "userName"
        },
        {
          title: "昵称",
          width: 200,
          ellipsis: true,
          colKey: "nickName"
        },
        {
          title: "状态",
          width: 200,
          ellipsis: true,
          colKey: "status"
        },
        // {
        //   align: "left",
        //   fixed: "right",
        //   width: 200,
        //   colKey: "op",
        //   title: "操作",
        //   className: () => 'cell-css',
        // }
      ],
      rowKey: "index",
      tableLayout: "fixed",
      verticalAlign: "top",
      hover: true,
      // 与pagination对齐
      pagination: {
        defaultPageSize: 20,
        total: 0,
        defaultCurrent: 1
      },
      searchValue: "",
      confirmVisible: false,
      showModal: false,
      exportVisible: false,
      editData: null,//通过 id 查询项目数据 编辑数据
      deleteIdx: -1,
      showUploadModal: false,//文件上传弹窗
      imgUrl1: "", // 引入图片方法一
      imgUrl2: undefined, // 引入图片方法二
    };
  },
  computed: {
    confirmExport() {
      return `导出所选信息`;
    },
    offsetTop() {
      return this.$store.state.setting.isUseTabsRouter ? 48 : 0;
    },
    currentPageData() {
      const start = (this.pagination.defaultCurrent - 1) * this.pagination.defaultPageSize;
      const end = start + this.pagination.defaultPageSize;
      return this.data.slice(start, end);
    }
  },
  mounted() {
    this.getUserList();
  },

  methods: {
    handleSizeChange(val) {
      this.pagination.defaultPageSize = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      this.pagination.defaultCurrent = val;
      const start = (this.pagination.defaultCurrent - 1) * this.pagination.defaultPageSize;
      const end = start + this.pagination.defaultPageSize;
      this.data = this.data.slice(start, end);
    },

    // 列表显示
    getUserList() {
      try {
        this.dataLoading = true;
        getUserList().then(res => {
          console.log('list返回数据', res);

          if (res.data.code == 200) {
            this.data = res.data.rows;
            this.pagination.total = res.data.total;
            this.data = res.data.rows.splice(0, this.pagination.defaultPageSize)
            this.dataLoading = false;
          } else {
            this.data = [];
            this.pagination.total = 0;
            this.$message.error({ content: "请重新搜索!", placement: 'top' },)
            this.dataLoading = false;
          }

        });

      } catch (error) {
        this.dataLoading = false;
        console.warn('接口提示', error);
      }
    },
    handlePageChange(pageInfo) {
      this.pagination.defaultCurrent = pageInfo.current;
      this.pagination.defaultPageSize = pageInfo.pageSize;
      this.getUserList()
    },
    // 通过id查询详情
    queryId(value) {
      try {
        const param = {
          projectId: value.row.projectId
        }
        queryId(param).then(res => {
          if (res.data.code == 200) {
            this.editData = null
            this.editData = res.data.data
            this.showModal = true
            this.formData = res.data.data
          } else {
            this.$message.error({ content: "请重新点击编辑按钮!", placement: 'top' },)
          }
        })
      } catch (error) {
        this.$message.error({ content: "请重新点击编辑按钮!", placement: 'top' },)
      }
    },
    saveOrUpdate() {
      try {
        const param = this.formData
        saveOrUpdate(param).then(res => {
          this.showModal = false;
          if (res.data.code == 200) {
            this.$message.success({ content: '保存成功!', placement: 'top' },)
            this.getUserList()
          } else {
            this.$message.error({ content: "请重新点击保存按钮!", placement: 'top' },)
          }
        })
      } catch (error) {
        this.$message.error({ content: "请重新点击保存按钮!", placement: 'top' },)
        this.showModal = false;
      }
    },
    handleUpload() {
      this.showUploadModal = true;
    },
    // 文件上传关闭
    funUploadClose() {
      this.showUploadModal = false;
    },
    // 文件上传确认
    funUploadConfirm() {
      this.showUploadModal = false;
    },
    deleteFun() {
      try {
        const param = {
          projectId: this.deleteIdx
        }
        deleteFun(param)
          .then(res => {
            if (res.data.code == 200) {
              this.confirmVisible = false;
              this.$message.success("删除成功");
              this.resetIdx();
              this.getUserList()
            } else {
              this.$message.error({ content: "请重新点击删除按钮!", placement: 'top' },)
            }
          })
      } catch (error) {
        this.$message.error({ content: "请重新点击删除按钮!", placement: 'top' },)
        this.confirmVisible = false;
      }


    },
    // 关闭弹窗
    funClose() {
      this.showModal = false;
    },
    // 新增弹窗
    funConfirm() {
      this.saveOrUpdate()
    },
    // 重置校验
    onReset() {
      this.$message.success("重置成功");
    },
    // 新增提交
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.$message.success("提交成功");
        this.showModal = false;
      } else {
        this.$message.warning(firstError);
      }
    },
    handleClear() {
      this.$refs.form.clearValidate();
    },

    getContainer() {
      return document.querySelector(".tdesign-starter-layout");
    },
    // 编辑
    handleClickDetail() {
      this.showModal = true;
    },
    // 导出
    handleExport() {
      this.exportVisible = true;
    },
    // 关闭导出
    exportCancel() {
      this.exportVisible = false;
    },
    // 确认都出
    onConfirmExport() {
      this.exportVisible = false;
    },
    // 搜索按钮
    handleSearch() {
      // console.log("搜索列表");
      this.getUserList();
    },
    handleSetupContract() {
      this.formData = {
        projectId: "",
        projectName: "",
        projectContacts: "",
        phone: "",
        createBy: "",
        createTime: dayjs().format("YYYY-MM-DD hh:mm:ss"),
        updateBy: "",
        updateTime: dayjs().add(7, 'days').format("YYYY-MM-DD hh:mm:ss"),
        remark: "",
        projectStatus: "",
        department: "",
        priority: "",
        deleted: 0,
        amount: ""
      }
      this.showModal = true;
    },
    // 删除
    handleClickDelete(row) {
      this.deleteIdx = row.row.projectId;
      this.confirmVisible = true;
    },
    // 确认删除
    onConfirmDelete() {
      // 真实业务请发起请求
      this.deleteFun()

    },
    onCancel() {
      this.resetIdx();
    },
    resetIdx() {
      this.deleteIdx = null;
    }
  }
});
</script>
<style>
.t-table--column-fixed .t-table__cell--fixed-right {
  /* z-index: 999;
  background-color: #fff; */
}
</style>

<style lang="less" scoped>
@import "@/style/variables";

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 0 0 6px;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: 8px;
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}

.t-button + .t-button {
  margin-left: @spacer;
}
</style>
